<template>
	<view style="height:calc(100vh - 0rpx) ;">
		<view class="view_bg">

			<view class="view_progress">
				<view class="itemview">
					<image class="icon_img" src="/static/image/duigou.png"></image>
					<text class="icon_text">任务提交</text>
				</view>
				<view class="line"></view>
				<view class="itemview">
					<image class="icon_img" src="/static/image/duigou.png"></image>
					<text class="icon_text">审核中</text>
				</view>
				<view class="line"></view>
				<view class="itemview">
					<image class="icon_img" src="/static/image/duigou.png"></image>
					<text class="icon_text">审核通过</text>
				</view>
			</view>

		</view>

		<view class="bottom_view">
			<!-- 运输信息 -->
			<view class="text-card">
				<view class="item">
					<view class="title">
						<text>运输信息</text>
					</view>

				</view>

				<view class="item" span="2">
					<view class="label">
						<text>车牌号</text>
					</view>
					<view class="content">
						<text>{{options.vehCode}}</text>
					</view>
				</view>
				<view class="item" span="2">
					<view class="label">
						<text>挂车牌号</text>
					</view>
					<view class="content">
						<text>{{options.trailerVehCode}}</text>
					</view>
				</view>
				<view class="item" span="2">
					<view class="label">
						<text>驾驶员</text>
					</view>
					<view class="content">
						<text>{{options.driverName}}</text>
					</view>
				</view>
				<view class="item" span="2">
					<view class="label">
						<text>押运员</text>
					</view>
					<view class="content">
						<text>{{options.escortName}}</text>
					</view>
				</view>
				<view class="item">
					<view class="label">
						<text>线路里程</text>
					</view>
					<view class="content">
						<text>{{detail_map.lineMileage?(detail_map.lineMileage+"km"):''}}</text>
					</view>
				</view>
				<view class="item">
					<view class="label">
						<text>途径路线</text>
					</view>
					<view class="content">
						<text>{{detail_map.lineName?detail_map.lineName:""}}</text>
					</view>
				</view>
			</view>

			<!-- 托运方 -->
		<!-- 	<view class="text-card">
				<view class="item">
					<view class="title">
						<text>托运方</text>
					</view>

				</view>
				<view class="item">
					<view class="label">
						<text>名称</text>
					</view>
					<view class="content">
						<text>{{detail_map.consignSquareName==""?"":detail_map.consignSquareName}}</text>
					</view>
				</view>
				<view class="item">
					<view class="label">
						<text>联系电话</text>
					</view>
					<view class="content">
						<text>{{detail_map.consignSquareTel==""?"":detail_map.consignSquareTel}}</text>
					</view>
				</view>
			</view> --><view class="text-card" v-for="(item ,index) in consignList" >
			<view class="item">
				<view class="label">
					<text>托运人</text>
				</view>
				<view class="content">
					<text>{{item.consignSquareName}}</text>
				</view>
			</view>
			<view class="item">
				<view class="label">
					<text>联系电话</text>
				</view>
				<view class="content">
					<text>{{item.consignSquareTel}}</text>
				</view>
			</view>
		</view>
			<view>
				<view v-for="(item,index) in addr_list" :key="index">
					<!-- 装货方 -->
					<view class="text-card" v-if="item.addrType==1">
						<view class="item">
							<view class="title">
								<text>装货方</text>
							</view>

						</view>
						<view class="item">
							<view class="label">
								<text>名称</text>
							</view>
							<view class="content">
								<text>{{item.comName}}</text>
							</view>
						</view>
						<view class="item">
							<view class="label">
								<text>联系电话</text>
							</view>
							<view class="content">
								<text>{{item.contactsTel}}</text>
							</view>
						</view>
						<view class="item">
							<view class="label">
								<text>装货日期</text>
							</view>
							<view class="content">
								<text>{{detail_map.estimateLoadingTime}}</text>
							</view>
						</view>
						<view class="item">
							<view class="label">
								<text>所在地区</text>
							</view>
							<view class="content">
								<text>{{item.zipCode&&getSelectPath(item.zipCode)}}</text>
							</view>
						</view>
						<view class="item">
							<view class="label">
								<text>详细地址</text>
							</view>
							<view class="content">
								<text>{{item.addr}}</text>
							</view>
						</view>
					</view>
					<!-- 收获方 -->
					<view class="text-card" v-if="item.addrType!=1">
						<view class="item">
							<view class="title">
								<text>收货方</text>
							</view>

						</view>
						<view class="item">
							<view class="label">
								<text>名称</text>
							</view>
							<view class="content">
								<text>{{item.comName}}</text>
							</view>
						</view>
						<view class="item">
							<view class="label">
								<text>联系电话</text>
							</view>
							<view class="content">
								<text>{{item.contactsTel}}</text>
							</view>
						</view>
						<view class="item">
							<view class="label">
								<text>卸货日期</text>
							</view>
							<view class="content">
								<text>{{detail_map.estimateUnloadingTime}}</text>
							</view>
						</view>
						<view class="item">
							<view class="label">
								<text>所在地区</text>
							</view>
							<view class="content">
								<text>{{item.zipCode&&getSelectPath(item.zipCode)}}</text>
							</view>
						</view>
						<view class="item">
							<view class="label">
								<text>详细地址</text>
							</view>
							<view class="content">
								<text>{{item.addr}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 货物信息 -->
			<view>
				<view class="text-card" v-for="(item,index) in hw_list" :key="index">
					<view class="item">
						<view class="title">
							<text>货物信息{{hw_list.length>1?index+1:""}}</text>
						</view>
					</view>
					<view class="item">
						<view class="label">
							<text>货物名称</text>
						</view>
						<view class="content">
							<text>{{item.ownerGoodsAlias||'-'}}</text>
						</view>
					</view>
					<view class="item">
						<view class="label">
							<text>包装规格</text>
						</view>
						<view class="content">
							<text>{{item.pkgSpec==""?"空":item.pkgSpec}}</text>
						</view>
					</view>
					<view class="item">
						<view class="label">
							<text>数量</text>
						</view>
						<view class="content">
							<!-- <text>{{item.goodsNumber}}</text> -->
							<text>{{item.goodsNumber}}{{item.goodsUnit}}</text>
						</view>
					</view>
					<view class="item">
						<view class="label">
							<text>重量</text>
						</view>
						<view class="content">
							<text>{{item.goodsWeight+"吨"}}</text>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSelectPath
	} from '@/common/util.js';
	// 确实所在地区转换
	export default {
		data() {
			return {
				id: "",
				taskId: "",
				vehCode: "", //车牌号
				trailerVehCode: "", //挂车牌号
				driverName: "", //驾驶员
				escortName: "", //押运员
				detail_map: {},
				hw_list: [], //货物信息
				addr_list: [], //装收货地址
				options: {},
				consignList:[]
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option); //打印出上个页面传递的参数。
			this.options = option;
		},
		mounted() {
			this.getDetail();
		},
		methods: {
			getSelectPath(code) {
				if (!code) {
					return '空'
				}
				const res = getSelectPath(code)
				return res.text;
			},
			//获取详情
			getDetail() {
				this.$api.taskDatail({
					'id': this.options.id,
					'taskId': this.options.taskId,
				}).then(res => {
					if (res.data['code'] == 200) {
						console.log(res)
						this.detail_map = res.data.data;
						this.hw_list = this.detail_map.busiTaskgoodsList;
						this.addr_list = this.detail_map.busiTaskaddrList;
						this.consignList = this.detail_map.consignList
					}
				}).catch(res => {

				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text-card {
		margin-bottom: 20rpx;

		.title {
			text {
				font-size: 30rpx;
			}
		}

	}

	.bottom_view {
		padding: 20rpx 20rpx 0rpx 20rpx;
		overflow: auto;
		height: calc(100vh - 200rpx);
	}

	.view_bg {
		background-color: #fcd95f;
		width: 100%;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;



		.view_progress {
			display: flex;
			align-items: center;

			.itemview {
				display: flex;
				flex-direction: column;
				justify-content: center;

				.icon_img {
					width: 40rpx;
					height: 40rpx;
					margin: 0 auto;
				}
			}

			.line {
				background-color: #000000;
				width: 150rpx;
				height: 2rpx;
				margin-left: 20rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>